<template>
  <div class="manageEquipment">
    <div class="btnGrounp">
      <el-button @click="addSerialNumber">新增序列号</el-button>
      <el-button @click="uploadFile">批量导入</el-button>
      <el-upload style="position:absolute;top:0;left:23%;opacity:0;"   class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="handlePreview" :limit="1">
        <el-button ref="uploadBtn" class="uploadBtn" size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <div class="search">
      <ul>
        <li>
          <span>序列号</span>
          <el-input v-model="search.serialNumber" @keyup.enter.native="searchEquipment" placeholder="请输入内容"></el-input>
        </li>
       <li>
          <span>邮箱</span>
          <el-input v-model="search.email" @keyup.enter.native="searchEquipment" placeholder="请输入内容" type='email'></el-input>
        </li>
        <li>
          <span>序列号状态</span>
          <el-select v-model="search.serialNumberStatus" placeholder="请选择">
            <el-option v-for="item in search.serialNumberOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </li>
        <li>
          <span>邮箱状态</span>
          <el-select v-model="search.emailStatus" placeholder="请选择">
            <el-option v-for="item in search.emailStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </li>
        <li class="lastLi">
          <el-button @click="searchEquipment">查询</el-button>
        </li>
      </ul>
    </div>
    <div class="content">
       <el-table :data="contentData" style="width: 100%" stripe>
        <!-- <el-table-column label="姓名"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column> -->
        <el-table-column prop="serialNum" label="序列号" width="180" align='center'></el-table-column>
        <el-table-column prop="status" label="序列号状态" width="180" align='center'></el-table-column>
        <el-table-column prop="isBindMail" label="邮箱状态" width="180" align='center'></el-table-column>
        <el-table-column prop="bindMail" label="绑定邮箱" width="180" align='center'></el-table-column>
        <el-table-column prop="startTime" label="帐号启用时间" width="180" align='center'></el-table-column>
        <el-table-column label="操作" align='center'>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column >
      </el-table>
    </div>
    <div class="paging">
      <el-pagination :page-size="pageSize"  layout="prev, pager, next" :total="totalNum" @current-change='changeCurrentPage'></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'manageEquipment',
  data () {
    return {
      search:{
        serialNumber:'',//序列号
        email:'',//邮箱
        serialNumberStatus:'',//序列号状态
        serialNumberOptions: [
          {
            value: '',
            label: '全部'
          },
           {
            value: 0,
            label: '未使用'
          }, {
            value: 1,
            label: '生效中'
          }, {
            value: 2,
            label: '已过期'
          }
        ],
        emailStatus:'',//邮箱状态
        emailStatusOptions: [
          {
            value: '',
            label: '全部'
          },
          {
            value: 1,
            label: '已绑定邮箱'
          }, {
            value: 0,
            label: '未绑定邮箱'
          }, {
            value: 2,
            label: '已注销邮箱'
          }
        ],
      },//查询对象
      //信息内容数据
      contentData: [],
      pageSize:7,//每页显示条目个数
      totalNum:1000,//总条目数   
      currentPage:1,
    }
  },
  methods: {
    //删除行
    handleDelete(index, row) {
      let _this = this;
      //console.log(index, row);
      _this.$confirm('是否删除?',  {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let sessionId = _this.$store.state.id;
          let api = '/api/sysSerial/delete?id='+row.id;
          _this.axios({
          method: 'post',
          url: api,
          headers:{
            sessionId,
          }
          }).then(res=>{
            //console.log('删除行',res);
            if(res.data.code == 200){
              _this.$message({
                type: 'success',
                message: '删除成功!'
              });
              _this.getAllEquipment();//刷新列表
            }else{
              this.$message({
                message: '删除失败',
                type: 'warning'
              });
            }
          });
          
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //改变当前页
    changeCurrentPage(val){
      //console.log(`当前页: ${val}`);
      let _this = this;
      _this.currentPage = val;
      _this.getAllEquipment();//调用同一接口
      // let api = '/api/sysSerial/find_page';
      // _this.axios.post(api,{
      //   param:val,
      // }).then(res=>{
      //   //console.log('分页',res);
      //   _this.contentData = res.data.data.bussData;//更新分页时表格的内容
      //   _this.contentData.forEach(item=>{
      //     item.status = (item.status == 0?'未启用':item.status) == 1?'使用中':'已过期';
      //     item.isBindMail = item.isBindMail == 0?'未绑定邮箱':'已绑定邮箱';
      //   });
      //   //console.log('分页设备信息',_this.contentData);
      // });
    },
    //新增序列号
    addSerialNumber(){
      let _this = this;
      let sessionId = _this.$store.state.id;
      _this.$prompt('新增序列号',  {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        //console.log('新增的序列号',value);
        let api = '/api/sysSerial/insert';
        _this.axios.post(api,{
          "serialNum": value,
        },{
          headers:{
            sessionId,
          }
        }).then(res=>{
          //console.log('新增序列号',res);
          if(res.data.code == 500){
            _this.$message(res.data.data.errMsg);
            return
          }
          if(res.data.code == 200){
            this.$message({
              message: '新增序列号成功！',
              type: 'success'
            });
            _this.getAllEquipment();
          }else{
            this.$message({
              message: '新增序列号失败！',
              type: 'warning'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });       
      });
    },
    //获取所有设备
    getAllEquipment(searchPage){
      let _this = this;
      let api = '/api/sysSerial/find_page';
      let sessionId = _this.$store.state.id;//获取token
      _this.axios.post(api,{
        "bindMailLike": _this.search.email,
        "isBindMail": _this.search.emailStatus,
        "pageIndex": searchPage == 1?searchPage:_this.currentPage,
        "pageSize": 7,
        "serialNumLike": _this.search.serialNumber,
        "status":_this.search.serialNumberStatus,
      },{
        headers:{
          sessionId,
        }
      }).then(res=>{
        if(res.data.code == 401){
                _this.$message({
                  type: 'info',
                  message: '登录已失效，请重新登录'
                });  
                _this.$router.push({
                  path:"/"
                });
                return
            }
            if(res.data.code == 200){
              _this.contentData = res.data.data.bussData;
              //console.log('所有设备',_this.contentData,'res',res);
              _this.totalNum = res.data.data.count;//获取总条数
              _this.contentData.forEach(item=>{
                // item.status = (item.status == 0?'未启用':item.status) == 1?'使用中':'已过期';
                switch(item.status){
                  case 0:
                    item.status = '未使用';
                    break;
                  case 1:
                    item.status = '使用中';
                    break;
                  case 2:
                    item.status = '已过期';
                    break;
                }
                item.isBindMail = item.isBindMail == 0?'未绑定邮箱':'已绑定邮箱';
              });
            }
        
      });
    },
    //查询设备
    searchEquipment(){
      let _this = this;
      _this.getAllEquipment(1);//调用同一接口
    },
    //点击 批量上传 按钮
    uploadFile(){
      let _this = this;
      //console.log(_this.$refs.uploadBtn);
      // _this.$refs.uploadBtn.click();
      document.getElementsByClassName('uploadBtn')[0].click();
    },
    //上传文件之前的钩子函数
    handlePreview(file) {
      //console.log('上传文件',file);
      let _this = this;
      let fd = new FormData();
      fd.append('file',file);//传文件
      let sessionId = _this.$store.state.id;//获取token

      // let suffix = file.name.split('.')[1];
      // //console.log(suffix,'suffix');
      // let contentType = file.type;
      let api = '/api/sysSerial/excelInput';
      _this.axios.post(api,fd,{
              headers:{
                sessionId,
              },
            })
      .then(function (res) {      
          //console.log('上传文件2...',res);
          if(res.data.code == 200){
            //console.log('成功');
            _this.$message({
              message: '导入成功！',
              type: 'success'
            });
            _this.getAllEquipment();//刷新数据
          }else{
            //console.log('失败');

            _this.$message({
              message: res.data.data.errMsg,
              type: 'warning'
            });
          }
          
      })
      .catch(function (error) {
        //console.log('上传错误2',error);
      })
      return false//屏蔽了action的默认上传
    },
  },
  mounted(){
    let _this = this;
    _this.getAllEquipment();//获取所有设备
  }
}
</script>

<style scoped>
/* 整体样式 */
.manageEquipment{
  height: 100%;
  width: 100%;
  position: relative;
  padding-left: 2%;
}
.manageEquipment>>>.btnGrounp .el-button{
  background-color: rgba(53, 174, 160, 1);
  color: rgb(255, 255, 255,1);
}
/* 查询 */
.manageEquipment>>>.search{
  width: 100%;
  height: 10%;
  line-height: 10%;
  position: absolute;
  top: 10%;
  font-size: .875rem;
}
/* 输入框 */
.manageEquipment>>>.el-input,.el-select{
  width: 70%;
}
/* 选择框下的输入框 */
.manageEquipment>>>.el-select .el-input{
  width: 100%;
}
.manageEquipment>>>.search ul{
  width: 100%;
  height: 100%;
  display: flex;
  
}
.manageEquipment>>>.search ul li{
  /* flex:1; */
  padding-right: 1%;
}
.manageEquipment>>>.search ul li span{
  padding-right: 2%;
}
.manageEquipment>>>.search ul li.lastLi button{
  color:rgba(16, 16, 16, 1);
}
/* 主要内容 */
.manageEquipment>>>.content{
  width: 85%;
  height: 68.6%;
  position: absolute;
  top: 21%;
  color: rgba(16, 16, 16, 1) !important;
}
/* 分页 */
.manageEquipment>>>.paging{
  position: absolute;
  bottom: 0%;
  text-align: center;
  width: 85%;
}

</style>
